<script lang="ts" setup>
import { repository } from '~/../package.json'

import { toggleDark } from '~/composables'
</script>

<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
    <el-menu-item index="/">
      <div class="flex items-center justify-center gap-2">
        <img src='/images/title_pic2.jpg' alt="Logo" class="h-9 w-9">
        <div class="flex flex-col items-start">
          <span class="chinese-title">国家信息生物中心</span>
          <span class="english-title-1">CHINA NATIONAL CENTER FOR BIOINFORMATION</span>
        </div>
      </div>
    </el-menu-item>
<!--    <el-menu-item index="/TaskCreate">-->
<!--      <span class="text-white font-bold">Data Resources</span>-->
<!--    </el-menu-item>-->
<!--    <el-menu-item index="/TaskQuery">-->
<!--      <span class="text-white font-bold">Computing Analysys</span>-->
<!--    </el-menu-item>-->
<!--    <el-menu-item index="/Help">-->
<!--      <span class="text-white font-bold">Data Network</span>-->
<!--    </el-menu-item>-->
<!--    <el-menu-item index="/Activate">-->
<!--      <span class="text-white font-bold">Standards</span>-->
<!--    </el-menu-item>-->
  </el-menu>
</template>

<style lang="scss">
.el-menu-demo {
  height: 7.5vh;background: #779c41;

  .chinese-title {
    font-size: 17px; // 调整为16px，原来是1.125rem(18px)
    line-height: 1.2;
  }

  // 新增的英文标题样式
  .english-title-1 {
    font-size: 10px; // 调整为10px，原来是0.75rem(12px)
    line-height: 1.2;
  }

  .ep-menu-item {
    color: #ffffff !important;
    font-weight: bold !important;

    &:hover {
      background-color: #779c41 !important;
    }

    &.is-active {
      color: white !important;
      border-bottom-color: #779c41 !important;
    }
  }

  :deep(.el-sub-menu) {
    &:hover {
      background-color: #779c41 !important;
    }
  }

  &.ep-menu--horizontal > .ep-menu-item:nth-child(1) {
    margin-right: auto;
  }
}
</style>